<template>
  <nav-header></nav-header>
  <nav-main></nav-main>
  <nav-footer></nav-footer>
  <div>
<!--    <h3>{{name}} &#45;&#45; {{num}}</h3>-->
<!--    <h3>{{arr.slice(1,3)}} &#45;&#45; {{obj}}</h3>-->
<!--    <div>{{num}} + {{num1}} = {{sum}}</div>-->
<!--    <div><button @click="add">button</button></div>-->

<!--    vuex-->
<!--    <h1>{{list}}</h1>-->

<!--    router-->
    <button @click="goto">跳转路由</button>
  </div>
</template>
<script>
import {defineComponent, ref, computed} from "vue";
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import NavHeader from "./vavHeader/NavHeader";
import NavMain from "./navMain/NavMain";
import NavFooter from "./navFooter/NavFooter";

export default{
  name: 'Home', // 组件名称
  // 定义子组件
  components: {
    NavHeader,
    NavMain,
    NavFooter
  },
  // 接收父亲组件的数据
  // props: {},
  // 核心函数
  setup(props, ctx){
    // let num = ref(8)
    // let name = ref('hugo')
    // let arr = ref([])
    // let obj = ref({})
    // arr.value.push(1,2,3)
    // obj.value['name'] = 'hugo'

    // let num1 = ref(8)
    // let add = () => {
    //   num.value++
    //   num1.value++
    // }
    // let sum = computed(() => {
    //   // 必须返回一个值
    //   // 逻辑代码
    //   return num.value + num1.value
    // })

    // store
    // let store= useStore()
    // // console.log(store)
    // // let list = () => { 返回的是一个 function
    // //   return store.state.list // function list() { return store.state.list; }
    // // }
    // // 通过 computed 获取 store
    // let list = computed(() => {
    //   return store.state.list
    // })

    // router
    let router = useRouter() // router 是全局路由对象
    // console.log(router)
    let route = useRoute() // route 当前路由对象
    // console.log('当前路由对象', typeof(route.query.num)) // query 传递过来的参数都是 string 类型
    // console.log(route.query) // query

    console.log(route.params) // params
    let goto = () => {
      // 跳转路由 push
      // push 函数里可以传入跳转的路径
      // router.push('/detail')
      router.push({ // 对象跳转
        path: '/home',
      })
    }

    return{
      // num,
      // name,
      // arr,
      // obj,
      // num1,
      // sum,
      // add,

      // store
      // list,

      // router
      goto
    }
  }
}


</script>
<style scoped lang="scss"> /* scoped 只在当前组件生效*/

</style>
